"use strict";
/**
 * @author zhaojiuyi
 * @date 2022/5/24-13:28
 * @version 1.0.0
 */
import * as echarts from 'echarts'
// Generate data
let category = [];
let dottedBase = +new Date();
let lineData = [];
let barData = [];

for (let i = 0; i < 20; i++) {
  let date = new Date((dottedBase += 1000 * 3600 * 24));
  category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'));
  let b = Math.random() * 200;
  let d = Math.random() * 200;
  barData.push(b);
  lineData.push(d + b);
}

// option
let option = {
  // backgroundColor: '#0f375f',
  grid: {
    left: '10%',
    right: '5%',
    top: '10%',
    bottom: '10%',
    // width: 250,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      label: {
        show: true,
        backgroundColor: '#333',
      },
    },
  },
  legend: {
    data: ['line', 'bar'],
    textStyle: {
      color: '#ccc',
    },
  },
  xAxis: {
    type: 'category',
    data: category,
    // boundaryGap: true,
    axisLine: {
      lineStyle: {
        color: '#ccc',
      },
    },
    axisLabel: {
      textStyle: {
        align: 'left',
      },
    },
  },
  yAxis: {
    splitLine: { show: false },
    axisLine: {
      lineStyle: {
        color: '#ccc',
      },
    },
  },
  series: [
    {
      name: 'line',
      type: 'line',
      smooth: true,
      // showSymbol: ,
      symbol: (e, index) => {
        // console.log('aaaa', index)
        if (index.name === '2021-12-24') {
          return 'circle';
        }
        return 'none';
      },
      symbolSize: 5,
      itemStyle: {
        normal: {
          color: 'orange',
          borderColor: '#fff',
          borderWidth: 1,
          lineStyle: {
            color: 'lightblue',
          },
        },
      },
      data: lineData,
    },
    {
      name: 'bar',
      type: 'bar',
      barWidth: 10,
      itemStyle: {
        normal: {
          barBorderRadius: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#14c8d4' },
            { offset: 1, color: '#43eec6' },
          ]),
        },
      },
      data: barData,
    }
  ],
};
export {option}
